<template>
  <div class="_page">
    <div class="cnt">
	  <div class="top">
		<div class="search">
			NEWS & EVENTS
		</div>
	  </div>
	  <div class="list_box">
		  <!-- <div class="oper">oper</div> -->
		  <div class="list">
			  <div v-for="(item, idx) in list" :key="idx" class="list_item" @click="gotoDetail(item)">
				<img :src="previewUrl + item.imgUrl" alt="">

				<div class="btns">
					<button>FULL DETAILS</button>
					<button><el-icon><Download /></el-icon> BROCHURE</button>
				</div>

				<div class="infos">
					<span>{{ item.releaseDate.substring(0, 10) }}</span>
					<span>{{ item.titleEn }}</span>
				</div>
			  </div>
		  </div>
		  
			<div class="pag">
				<el-pagination
					v-model:current-page="pageNo"
					:page-size="pageSize"
					:background="false"
					layout="prev, pager, next"
					:total="total"
					@size-change="handler"
					@current-change="getPage"
				/>
			</div>
	  </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { ref, onMounted, reactive } from 'vue'
import { publishGetPage } from '@/api/website/publish'
import { typeGetAll } from '@/api/boat/type'
import { brandGetAll } from '@/api/boat/brand'
import echarts from '@/components/echarts'
import { useRouter } from 'vue-router'

let $router = useRouter()

let userStore = useUserStore()
const previewUrl = ref(import.meta.env.VITE_IMG_SERVE)

onMounted(() => {
  getPage()
})

//分页器当前页码
let pageNo = ref<number>(1)
//每一页展示几条数据
let pageSize = ref<number>(10)

let total = ref<number>(0)
let list = ref([])

const query = reactive({
  typeId: '',
  brandId: '',
  model: '',
})
const getPage = async (pager = 1) => {
	try{
  		pageNo.value = pager

		let { data, status } = await publishGetPage({
			pageNo: pageNo.value,
			pageSize: pageSize.value,
			...query
		})
		
		if (status == 200) {
			let { records, total: tatalNums } = data
			total.value = tatalNums
			list.value = records
		} else {
			// ElMessage({ type: 'error', message: msg })
		}
	}catch(e){
		//TODO handle the exception
	}
}

const search = () => {
  getPage(1)
}

const gotoDetail = (row) => {
	$router.push({
		path: '/news/detail',
		query: {
			id: row.id
		}
	})
}
</script>

<style lang="scss" scoped>
$same_color: $theme-primary;
._page {

}
.cnt {

  .top {
	position: relative;
	margin-bottom: 40px;

	.search {
		background-color: $theme-primary;
		color: #fff;
		padding: 20px;
		text-align: center;
		font-size: 1.8rem;
	}
  }

  .list_box {
	.list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.list_item {
			position: relative;
			flex: 0 1 31%;
			overflow: hidden;
			margin: 0 0 20px;

			img {
				width: 100%;
				height: 300px;
				object-fit: cover;
				transition: all .5s;
				overflow: hidden;
			}

			.infos {

				span {
					display: block;
					line-height: 1.5;
					&:first-child {
						font-size: 1.2rem;
					}

					&:last-child {
						color: #696969;
					}
				}
			}

			&:hover {
				img {
					// transform: scale(1.2);
				}
				.btns {
					// visibility: visible;
				}
			}

			.btns {
				display: flex;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				visibility: hidden;

				button {
					border: 0;
					margin: 0 10px;
					padding: 6px 40px;
					cursor: pointer;
					word-break: keep-all;
					white-space: nowrap;

					&:first-child {
						color: $theme-primary;
					}
					&:last-child {
						background-color: $theme-primary;
						color: #fff;
					}
				}
			}
		}

	}

	.pag {
		display: flex;
		justify-content: center;
	}
  }
}

@media (max-width: 768px) { 
	.cnt {

		.top {
			.info {
				width: 100%;
				margin: 0;
			}
		}

		.list_box {
			.list {
				.list_item {
					flex: 1 1 100%;
					margin: 0 0 20px;
				}
			}
		}
	}
}
</style>